<template>
  <view class="stock-page">
    <view class="card" v-for="(item, index) in dataList" :key="index">
      <view>
        <image :src="getImage(item.asset_image)"/>
        <u-tag v-if="item.asset_state === 'IN_USE'" type="success">{{item.asset_state_name}}</u-tag>
        <u-tag v-else-if="item.asset_state === 'IDLE'">{{item.asset_state_name}}</u-tag>
        <u-tag v-else type="info">{{item.asset_state_name}}</u-tag>
      </view>
      <view>
        <view>
          <span>{{item.asset_name}}</span>
          <view>
            <u-tag v-if="item.status === 'NOT_STARTED'" type="info">{{item.status_name}}</u-tag>
            <u-tag v-else-if="item.status === 'PROFIT'">{{item.status_name}}</u-tag>
            <u-tag v-else-if="item.status === 'LOSS'" type="error">{{item.status_name}}</u-tag>
            <u-tag v-else type="success">{{item.status_name}}</u-tag>
          </view>
        </view>
        <span>使用部门 {{item.department_name}}</span>
        <span>使用人 {{item.user_name}}</span>
        <span>标签编码 {{item.label_number}}</span>
        <span>资产编码 {{item.asset_code}}</span>
        <span>存放地点 {{item.location_name}}</span>
      </view>
    </view>
  </view>
</template>

<script setup>

import {BASE_URL} from "@/api/request";

defineProps({
  dataList: {
    type: Array,
    default: () => []
  }
})

const getImage = (url) => {
  if (url)
    return `${BASE_URL}/File/GetImage?fileId=${url}`
  return ""
}

</script>

<style scoped lang="scss">
.stock-page {
  width: 100%;

  .card {
    margin: 0 20rpx 20rpx 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    display: flex;

    &:first-child {
      margin-top: 20rpx;
    }

    & > view:first-child {
      position: relative;

      image {
        height: 200rpx;
        width: 200rpx;
      }

      :deep(.u-transition.u-fade-enter-to.u-fade-enter-active) {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(20%, -40%);
      }
    }

    & > view:last-child {
      padding-left: 40rpx;
      width: calc(100% - 200rpx);
      display: flex;
      flex-direction: column;
      color: #b7b7b9;

      > * {
        padding: 5rpx 0;
      }

      & > view {
        display: flex;
        align-items: center;

        > span {
          color: black;
        }

        > view {
          //flex
          margin-left: auto;
        }
      }
    }
  }
}
</style>